import React, { useState } from 'react';
import {
  Card,
  Table,
  Button,
  Modal,
  Form,
  Tag,
  Space,
  Typography,
  Row,
  Col,
  message,
} from 'antd';
import {
  PlusOutlined,
  CalendarOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
} from '@ant-design/icons';
import EventFormModal from './EventFormModal';
import EventDetailModal from './EventDetailModal';
import SongManagementModal from './SongManagementModal';

const { Title } = Typography;

const Events = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isSongModalVisible, setIsSongModalVisible] = useState(false);
  const [editingEvent, setEditingEvent] = useState(null);
  const [selectedEvent, setSelectedEvent] = useState(null);
  const [form] = Form.useForm();

  // 模拟数据
  const [events, setEvents] = useState([
    {
      key: '1',
      title: '周末演出',
      type: '演出',
      date: '2024-01-20',
      time: '19:00',
      location: '音乐厅',
      status: 'upcoming',
      songs: ['夜空中最亮的星', '海阔天空', '光辉岁月'],
      members: ['张三', '李四', '王五'],
      description: '周末音乐演出活动',
    },
    {
      key: '2',
      title: '排练活动',
      type: '排练',
      date: '2024-01-18',
      time: '14:00',
      location: '排练室',
      status: 'completed',
      songs: ['童话', '夜空中最亮的星'],
      members: ['张三', '李四', '王五', '赵六'],
      description: '常规排练活动',
    },
    {
      key: '3',
      title: '音乐节',
      type: '演出',
      date: '2024-01-15',
      time: '20:00',
      location: '户外广场',
      status: 'completed',
      songs: ['海阔天空', '光辉岁月', '童话', '夜空中最亮的星'],
      members: ['张三', '李四', '王五', '赵六', '钱七'],
      description: '大型音乐节演出',
    },
  ]);

  const columns = [
    {
      title: '活动名称',
      dataIndex: 'title',
      key: 'title',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type) => <Tag color="blue">{type}</Tag>,
    },
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '地点',
      dataIndex: 'location',
      key: 'location',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusMap = {
          upcoming: { color: 'blue', text: '即将开始' },
          completed: { color: 'green', text: '已完成' },
          cancelled: { color: 'red', text: '已取消' },
        };
        const config = statusMap[status] || { color: 'default', text: '未知' };
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '歌曲数量',
      dataIndex: 'songs',
      key: 'songs',
      render: (songs) => songs.length,
    },
    {
      title: '参与成员',
      dataIndex: 'members',
      key: 'members',
      render: (members) => members.length,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleViewDetails(record)}
          >
            详情
          </Button>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const handleViewDetails = (record) => {
    setSelectedEvent(record);
    setIsSongModalVisible(true);
  };

  const handleEdit = (record) => {
    setEditingEvent(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (record) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除活动 "${record.title}" 吗？`,
      onOk() {
        setEvents(events.filter(item => item.key !== record.key));
        message.success('删除成功');
      },
    });
  };

  const handleAdd = () => {
    setEditingEvent(null);
    setIsModalVisible(true);
  };

  const handleModalOk = (eventData) => {
    if (editingEvent) {
      setEvents(events.map(item => 
        item.key === editingEvent.key ? { ...item, ...eventData } : item
      ));
      message.success('更新成功');
    } else {
      setEvents([...events, eventData]);
      message.success('添加成功');
    }

    setIsModalVisible(false);
    setEditingEvent(null);
    form.resetFields();
  };

  const handleModalCancel = () => {
    setIsModalVisible(false);
    setEditingEvent(null);
    form.resetFields();
  };

  return (
    <div>
      <Title level={2}>活动管理</Title>

      {/* 操作按钮 */}
      <Card style={{ marginBottom: 16 }}>
        <Row justify="space-between" align="middle">
          <Col>
            <Space>
              <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={handleAdd}
              >
                创建活动
              </Button>
              <Button icon={<CalendarOutlined />}>
                导出日程
              </Button>
            </Space>
          </Col>
          <Col>
            <Space>
              <Button>本周活动</Button>
              <Button>本月活动</Button>
              <Button>全部活动</Button>
            </Space>
          </Col>
        </Row>
      </Card>

      {/* 活动列表 */}
      <Card>
        <Table
          columns={columns}
          dataSource={events}
          pagination={{
            total: events.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) =>
              `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
          }}
        />
      </Card>

      {/* 创建/编辑活动模态框 */}
      <EventFormModal
        visible={isModalVisible}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
        editingEvent={editingEvent}
        form={form}
      />

      {/* 活动详情模态框 */}
      <EventDetailModal
        visible={isSongModalVisible}
        onCancel={() => setIsSongModalVisible(false)}
        onEdit={handleEdit}
        selectedEvent={selectedEvent}
      />
    </div>
  );
};

export default Events; 